<template>
	<view class="container">
		<view class="header">
			<image class="yanxuan-logo" src="/static/images/logo.png"></image>
			<view class="search">
				<view class="iconfont icon-sousuo"></view>
				<input class="keyword" type="text" value="" placeholder="搜索内容" placeholder-style="color:#ccc;text-align:center"/>
			</view>
			<button class="btn">查询</button>
		</view>
		<scroll-view class="nav"  scroll-x>
			<view :class="['navItem',navIndex===-1?'active':'']" @click="switchNav(-1)">推荐</view>
			<view :class="['navItem',navIndex===index?'active':'']"  @click="switchNav(index)" v-for="(nav,index) in homeData.kingKongModule.kingKongList" :key="nav.L1Id">{{nav.text}}</view>
		</scroll-view>
		
		<scroll-view class="scroll" scroll-y>
			<Recommend :homeData="homeData" v-if="navIndex===-1"></Recommend>
			<CateList :navIndex="navIndex" v-else></CateList>
		</scroll-view>
	</view>
</template>

<script>
import request from '../../utils/request'
import Recommend from '../../components/Recommend/index.vue'
import CateList from '../../components/CateList/index.vue'
import {mapState,mapActions} from 'vuex'
	export default {
		data(){
			return {
				navIndex:-1
			}
		},
		async mounted(){
			this.getHomeData()
		},
		components:{
			Recommend,
			CateList
		},
		computed:{
			...mapState('home',['homeData'])
		},
		methods:{
			switchNav(navIndex){
				this.navIndex=navIndex
			},
			...mapActions('home',['getHomeData'])
		}
	}
</script>

<style lang="stylus">
	.container
		.header
			padding 16upx
			height 80upx
			display flex
			align-items center
			.yanxuan-logo
				width 120upx
				height 60upx
				flex-shrink 0 
				margin-right 10upx
			.search
				display flex
				align-items center
				height 60upx
				font-size 26upx
				background-color #E6ECEB
				flex-grow 1
				.icon-sousuo
					width 40upx
					padding-left 20upx
					padding-top 8upx
			.btn
				width 160upx
				font-size 24upx
				color #CF1F00
				flex-shrink 0
				margin-left 10upx
		.nav
			white-space nowrap
			.navItem
				display inline-block
				width 150upx
				height 60upx
				font-size 28upx
				text-align center
				&.active
					border-bottom 5upx solid red
		.scroll
			height calc(100vh - 112upx - 74upx - var(--window-top) - var(--window-bottom))
</style>
<style>
